<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>Document</title>
	<link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
	<link href="../css/jquery-ui.css" rel="stylesheet" type="text/css">
	<link href="../css/webim_demo.css" rel="stylesheet" type="text/css">
	<link href="../css/bootstrap-table.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" type="text/css" href="../css/friendslist.css">
	<script src="../js/jquery-3.3.1.js"></script>
	<script src="../jss/lib/lodash.min.js" type="text/javascript"></script>
	<script src="../jss/lib/jquery/jquery-ui.js" type="text/javascript"></script>
	<script src="../jss/lib/lodash.min.js" type="text/javascript"></script>
	<script src="../jss/lib/bootstrap/bootstrap.js" type="text/javascript"></script>
	<script src="../jss/lib/bootstrap/bootstrap-table.js" type="text/javascript"></script>
	<script src="../jss/lib/bootstrap/bootstrap-collapse.js" type="text/javascript"></script>
	<script src="../jss/lib/xss.js" type="text/javascript"></script>

</head>
<body>
	<header>
		<a href="javascript:history.back(-1)" class="back"><img src="../img/back.png" height="18px"></a>
		<div class="center title">好友列表</div>
	</header>
	<div id="getAllFriendMenu" onclick="getMyFriend()">我的好友</div>
	<div class="content" id="content">
		<!-- 	<a href="friends.html" class="underlining">
				<div class="flex h-portrait">
					<img src="../img/logo.png" height="50px">
					<div class="content-r">
						<div>
							<p>小苏苏</p>
						</div>
					</div>
				</div>
			</a>
			<div class="flex h-portrait">
				<img src="../img/logo.png" height="50px">
				<div class="content-r">
					<div>
						<p>马化腾</p>
					</div>
				</div>
			</div>
			<div class="flex h-portrait">
				<img src="../img/logo.png" height="50px">
				<div class="content-r">
					<div>
						<p>刘强东</p>
					</div>
				</div>---->
			</div>
		<div aria-hidden="true" aria-labelledby="get_my_friend_dialog_label" class="modal fade" data-backdrop="static" id="get_my_friend_dialog"
			role="dialog" tabindex="-1">
			<div class="modal-dialog-wide">
				<div class="modal-content">
					<div class="modal-header">
						<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
						<h4 class="modal-title" id="get_my_friend_dialog_label">我的好友</h4>
					</div>
					<div class="modal-body">
						<table id="get_my_friend_table"></table>
					</div>
					<div class="modal-footer">
						<button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
	<div aria-hidden="true" style="opacity: 0" aria-labelledby="login_dialog_label" class="modal fade" data-backdrop="static" id="login_dialog"
	role="dialog" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
				<h4 class="modal-title" id="login_dialog_label">登录</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" onkeydown="if(event.keyCode==13)return false;" role="form">
					<div class="form-group">
						<label class="col-sm-2 control-label" for="login_account">identifier</label>
						<div class="col-sm-10">
							<input class="form-control" id="login_account" maxlength="100" placeholder="请输入identifier" type="text" value="">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="login_pwd">UserSig</label>
						<div class="col-sm-10">
							<input class="form-control" id="login_pwd" placeholder="请输入UserSig" type="password" value="">
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
				<button class="btn btn-primary" id="click" onclick="independentModeLogin()" type="button">确定</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
 <!-- /.modal -->
  <div aria-hidden="true" aria-labelledby="send_c2c_msg_dialog_label" class="modal fade" data-backdrop="static" id="send_c2c_msg_dialog"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
          <h4 class="modal-title" id="send_c2c_msg_dialog_label">发C2C消息</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" id="scm_form" name="scm_form" role="form">
            <div class="form-group">
              <label class="col-sm-2 control-label" for="scm_to_account">好友账号</label>
              <div class="col-sm-10">
                <input class="form-control" id="scm_to_account" placeholder="" readonly="readonly" type="text">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="scm_content">内容</label>
              <div class="col-sm-10">
                <input class="form-control" id="scm_content" onkeydown="if(event.keyCode==13)return false;" placeholder="请输入消息内容" type="text">
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
          <button class="btn btn-primary sendmsg" onclick="sendC2cMsg()" type="button">提交</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <div aria-hidden="true" aria-labelledby="delete_friend_dialog_label" class="modal fade" data-backdrop="static" id="delete_friend_dialog"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
          <h4 class="modal-title" id="delete_friend_dialog_label">删除好友</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" onkeydown="if(event.keyCode==13)return false;" role="form">
            <input id="df_sel_row_index" type="hidden">
            <div class="form-group">
              <label class="col-sm-2 control-label" for="df_to_account">对方帐号</label>
              <div class="col-sm-10">
                <input class="form-control" id="df_to_account" placeholder="请输入对方帐号" readonly="readonly" type="text">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="df_type_radio">操作</label>
              <div class="col-sm-10">
                <label class="radio-inline">
                  <input checked id="df_type_both_radio" name="df_type_radio" type="radio" value="Delete_Type_Both"> 双向删除</label>
                <label class="radio-inline">
                  <input id="df_type_single_radio" name="df_type_radio" type="radio" value="Delete_Type_Single"> 单向删除</label>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
          <button class="btn btn-primary" onclick="deleteFriend()" type="button">提交</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
   <div class="sesspart" style="display: none;">
      <div class="accordion" id="accordionContact">
        <div class="accordion-group">
          <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="#accordionContact" data-toggle="collapse" href="#collapseRecentSession">最近联系人</a>
          </div>
          <div class="accordion-body collapse in" id="collapseRecentSession">
            <div class="sesslist"></div>
          </div>
        </div>
        <!-- <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionContact" href="#collapseFriend">
                        我的好友
                    </a>
                </div>
                <div id="collapseFriend" class="accordion-body collapse">
                    <div class="sesslist">
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionContact" href="#collapseGroup">
                        我的群组
                    </a>
                </div>
                <div id="collapseGroup" class="accordion-body collapse">
                    <div class="sesslist-group">
                    </div>
                </div>
            </div> -->
      </div>
    </div>
    <div class="chatpart" style="display: none;">
      <div class="msgflow" style="width: 100%;height: 88%;border: none"></div>
      <span id="msg_end" style="overflow:hidden"></span>
      <div class="editbar" style="display: none">
        <a class="chat02_title_btn ctb01" onclick="showEmotionDialog()" title="选择表情"></a>
        <a class="chat02_title_btn ctb03" href="#" onclick="selectPicClick()" title="选择图片"></a>
        <a class="chat02_title_btn ctb05" href="#" onclick="selectFileClick()" title="选择文件"></a>
        <a class="chat02_title_btn ctb04" href="#" onclick="showEditCustomMsgDialog()" title="发送自定义消息"></a>
        <div class="wl_faces_box" id="wl_faces_box">
          <div class="wl_faces_content">
            <div class="title">
              <ul>
                <li class="title_name">常用表情</li>
                <li class="wl_faces_close">
                  <span onclick='turnoffFaces_box()'>&nbsp;</span>
                </li>
              </ul>
            </div>
            <div class="wl_faces_main" id="wl_faces_main">
              <ul id="emotionUL"></ul>
            </div>
          </div>
          <div class="wlf_icon"></div>
        </div>
      </div>
      <!-- <textarea style="display: none;" class="msgedit" cols="82" id="send_msg_text" onkeydown="onTextareaKeyDown()" rows="5"></textarea> -->
     <!--  <div class="sendbar" style="display: none;">
        <button class="sendbtn" onclick="onSendMsg()" type="button">发送</button>
        <button class="closebtn" onclick="onClose()" type="button">关闭</button>
      </div> -->
    </div>
</body>
</html>
<script src="https://tls.qcloud.com/libs/api.min.js" type="text/javascript"></script>
<!--用于获取文件MD5 js api(发送图片时用到)-->

<script src="../jss/lib/md5/spark-md5.js" type="text/javascript"></script>
<!--web im sdk-->

<script src="../sdk/webim.js" type="text/javascript"></script>
<!--<script type="text/javascript" src="sdk/webim.min.js"></script>-->

<script src="../sdk/json2.js" type="text/javascript"></script>
<!--web im sdk 登录 示例代码-->

<script src="../jss/login/login.js" type="text/javascript"></script>
<!--web im sdk 登出 示例代码-->

<script src="../jss/logout/logout.js" type="text/javascript"></script>
<!--web im 解析一条消息 示例代码-->

<script src="../jss/common/show_one_msg.js" type="text/javascript"></script>
<!--web im demo 基本逻辑-->

<script src="../jss/base.js" type="text/javascript"></script>
<!--web im sdk 资料管理 api 示例代码-->

<script src="../jss/profile/profile_manager.js" type="text/javascript"></script>
<!--web im sdk 好友管理 api 示例代码-->

<script src="../jss/friend/friend_manager.js" type="text/javascript"></script>
<!--web im sdk 好友申请管理 api 示例代码-->

<script src="../jss/friend/friend_pendency_manager.js" type="text/javascript"></script>
<!--web im sdk 好友黑名单管理 api 示例代码-->

<script src="../jss/friend/friend_black_list_manager.js" type="text/javascript"></script>
<!--web im sdk 最近联系人 api 示例代码-->

<script src="../jss/recentcontact/recent_contact_list_manager.js" type="text/javascript"></script>
<!--web im sdk 群组管理 api 示例代码-->

<script src="../jss/group/group_manager.js" type="text/javascript"></script>
<!--web im sdk 群成员�����理 api 示例代码-->

<script src="../jss/group/group_member_manager.js" type="text/javascript"></script>
<!--web im sdk 加群申请管理 api 示例代码-->

<script src="../jss/group/group_pendency_manager.js" type="text/javascript"></script>
<!--web im 切换聊天好友或群组 示例代码-->

<script src="../jss/switch_chat_obj.js" type="text/javascript"></script>
<!--web im sdk 获取c2c获取群组历史消息 示例代码-->

<script src="../jss/msg/get_history_msg.js" type="text/javascript"></script>
<!--web im sdk 发送普通消息(文本和表情) api 示例代码-->

<script src="../jss/msg/send_common_msg.js" type="text/javascript"></script>
<!--web im sdk 上传和发送图片消息 api 示例代码-->

<script src="../jss/msg/upload_and_send_pic_msg.js" type="text/javascript"></script>
<!--web im sdk 上传和发送文件消息 api 示例代码-->

<script src="../jss/msg/upload_and_send_file_msg.js" type="text/javascript"></script>
<!--web im sdk 切换播放语音消息 示例代码-->

<script src="../jss/msg/switch_play_sound_msg.js" type="text/javascript"></script>
<!--web im sdk 发送自定义消息 api 示例代码-->

<script src="../jss/msg/send_custom_msg.js" type="text/javascript"></script>
<!--web im sdk 发送群自定义通知 api 示例代码-->

<script src="../jss/msg/send_custom_group_notify_msg.js" type="text/javascript"></script>
<!--web im 监听新消息(c2c或群) 示例代码-->

<script src="../jss/msg/receive_new_msg.js" type="text/javascript"></script>
<!--web im 监听群系统通知消息 示例代码-->

<script src="../jss/msg/receive_group_system_msg.js" type="text/javascript"></script>
<!--web im 监听好友系统通知消息 示例代码-->

<script src="../jss/msg/receive_friend_system_msg.js" type="text/javascript"></script>
<!--web im 监听资料系统通知消息 示例代码-->

<script src="../jss/msg/receive_profile_system_msg.js" type="text/javascript"></script>


<script src="../jss/lib/BenzAMRRecorder.js" type="text/javascript"></script>
<!-- web im 让h5支持播放amr录音文件 -->
<script src="../js/friends.js"></script>
<script type="text/javascript">
	var uImg = localStorage.getItem('uImg');
	var uCount = localStorage.getItem('uCount');
	$('.msgedit').keyup(function () {
		if($(this).val()!=''){
			$('.add').hide();
			$('.submit').show()
		}else {
			$('.add').show();
			$('.submit').hide()
		}
	});
    // 将以下两个参数替换成您的配置
    var sdkAppID = '1400204816'; // 填写第一步获取到的 sdkappid
    //var accountType = ''; // 填写第二步设置账号体系集成获取到的 accountType , 已废弃

    // 登录帐号
    var identifier = uCount, // 填写第三步输入的 identifier，由您指定，可以在登录页面直接输入
        userSig = localStorage.getItem('userSig'); //填写第三步生成的userSig，可以在登录页面直接输入

    //帐号模式，0-表示独立模式，1-表示托管模式(托管模式已经停用，请使用独立模式集成帐号)
    var accountMode = 0;
    
    //当前用户身份
    var loginInfo = {
      'sdkAppID': sdkAppID, //用户所属应用id,必填
      // 'accountType': accountType, //用户所属应用帐号类型，必填 , 已废弃
      'identifier': identifier, //当前用户ID,必须是否字符串类型，必填
      'userSig': userSig,
      //当前用户身份凭证，必须是字符串类型，必填
      'identifierNick': null, //当前用户昵称，不用填写，登录接口会返回用户的昵称，如果没有设置，则返回用户的id
      'headurl': uImg //当前用户默认头像，选填，如果设置过头像，则可以通过拉取个人资料接口来得到头像信息
  };

  var AdminAcount = 'qwe101';
    var selType = webim.SESSION_TYPE.C2C; //当前聊天类型
    var selToID = 'dengshilin'; //当前选中聊天id（当聊天类型为私聊时，该值为好友帐号，否则为群号）
    var selSess = null; //当前聊天会话对象
    var recentSessMap = {}; //保存最近会话列表
    var reqRecentSessCount = 50; //每次请求的最近会话条数，业务可以自定义

    var isPeerRead = 1; //是否需要支持APP端已读回执的功能,默认为0。是：1，否：0。

    //默认好友头像
    var friendHeadUrl = '../img/friend.jpg'; //仅demo使用，用于没有设置过头像的好友
    //默认群头像
    var groupHeadUrl = '../img/group.jpg'; //仅demo使用，用于没有设置过群头像的情况


    //存放c2c或者群信息（c2c用户：c2c用户id，昵称，头像；群：群id，群名称，群头像）
    var infoMap = {}; //初始化时，可以先拉取我的好友和我的群组信息


    var maxNameLen = 12; //我的好友或群组列表中名称显示最大长度，仅demo用得到
    var reqMsgCount = 15; //每次请求的历史消息(c2c获取群)条数，仅demo用得到

    var pageSize = 15; //表格的每页条数，bootstrap table 分页时用到
    var totalCount = 200; //每次接口请求的条数，bootstrap table 分页时用到

    var emotionFlag = false; //是否打开过表情选择框

    var curPlayAudio = null; //当前正在播放的audio对象

    var getPrePageC2CHistroyMsgInfoMap = {}; //保留下一次拉取好友历史消息的信息
    var getPrePageGroupHistroyMsgInfoMap = {}; //保留下一次拉取群历史消息的信息

    var defaultSelGroupId = null; //登录默认选中的群id，选填，仅demo用得到

    //监听（多终端同步）群系统消息方法，方法都定义在receive_group_system_msg.js文件中
    //注意每个数字代表的含义，比如，
    //1表示监听申请加群消息，2表示监听申请加群被同意消息，3表示监听申请加群被拒绝消息
    var onGroupSystemNotifys = {
      "1": onApplyJoinGroupRequestNotify, //申请加群请求（只有管理员会收到）
      "2": onApplyJoinGroupAcceptNotify, //申请加群被同意（只有申请人能够收到）
      "3": onApplyJoinGroupRefuseNotify, //申请加群被拒绝（只有申请人能够收到）
      "4": onKickedGroupNotify, //被管理员踢出群(只有被踢者接收到)
      "5": onDestoryGroupNotify, //群被解散(全员接收)
      "6": onCreateGroupNotify, //创建群(创建者接收)
      "7": onInvitedJoinGroupNotify, //邀请加群(被邀请者接收)
      "8": onQuitGroupNotify, //主动退群(主动退出者接收)
      "9": onSetedGroupAdminNotify, //设置管理员(被设置者接收)
      "10": onCanceledGroupAdminNotify, //取消管理员(被取消者接收)
      "11": onRevokeGroupNotify, //群已被回收(全员接收)
      "15": onReadedSyncGroupNotify, //群消息已读同步通知
      "255": onCustomGroupNotify, //用户自定义通知(默认全员接收)
      "12": onInvitedJoinGroupNotifyRequest //邀请加群(被邀请者接收,接收者需要同意)
  };

    //监听好友系统通知函数对象，方法都定义在receive_friend_system_msg.js文件中
    var onFriendSystemNotifys = {
      "1": onFriendAddNotify, //好友表增加
      "2": onFriendDeleteNotify, //好友表删除
      "3": onPendencyAddNotify, //未决增加
      "4": onPendencyDeleteNotify, //未决删除
      "5": onBlackListAddNotify, //黑名单增加
      "6": onBlackListDeleteNotify //黑名单删除
  };

  var onC2cEventNotifys = {
      "92": onMsgReadedNotify, //消息已读通知,
      "96": onMultipleDeviceKickedOut
  };

    //监听资料系统通知函数对象，方法都定义在receive_profile_system_msg.js文件中
    var onProfileSystemNotifys = {
      "1": onProfileModifyNotify //资料修改
  };

    //监听连接状态回调变化事件
    var onConnNotify = function (resp) {
    	var info;
    	switch (resp.ErrorCode) {
    		case webim.CONNECTION_STATUS.ON:
    		webim.Log.warn('建立连接成功: ' + resp.ErrorInfo);
    		break;
    		case webim.CONNECTION_STATUS.OFF:
    		info = '连接已断开，无法收到新消息，请检查下你的网络是否正常: ' + resp.ErrorInfo;
          // alert(info);
          webim.Log.warn(info);
          break;
          case webim.CONNECTION_STATUS.RECONNECT:
          info = '连接状态恢复正常: ' + resp.ErrorInfo;
          // alert(info);
          webim.Log.warn(info);
          break;
          default:
          webim.Log.error('未知连接状态: =' + resp.ErrorInfo);
          break;
      }
  };

    //IE9(含)以下浏览器用到的jsonp回调函数
    function jsonpCallback(rspData) {
    	webim.setJsonpLastRspData(rspData);
    }

    //监听事件
    var listeners = {
      "onConnNotify": onConnNotify //监听连接状态回调变化事件,必填
      ,
      "jsonpCallback": jsonpCallback //IE9(含)以下浏览器用到的jsonp回调函数，
      ,
      "onMsgNotify": onMsgNotify //监听新消息(私聊，普通群(非直播聊天室)消息，全员推送消息)事件，必填
      ,
      "onBigGroupMsgNotify": onBigGroupMsgNotify //监听新消息(直播聊天室)事件，直播场景下必填
      ,
      "onGroupSystemNotifys": onGroupSystemNotifys //监听（多终端同步）群系统消息事件，如果不需要监听，可不填
      ,
      "onGroupInfoChangeNotify": onGroupInfoChangeNotify //监听群资料变化事件，选填
      ,
      "onFriendSystemNotifys": onFriendSystemNotifys //监听好友系统通知事件，选填
      ,
      "onProfileSystemNotifys": onProfileSystemNotifys //监听资料系统（自己或好友）通知事件，选填
      ,
      "onKickedEventCall": onKickedEventCall //被其他登录实例踢下线
      ,
      "onC2cEventNotifys": onC2cEventNotifys //监听C2C系统消息通道
      ,
      "onAppliedDownloadUrl": onAppliedDownloadUrl //申请文件/音频下载地址的回调
      ,
      "onLongPullingNotify": function (data) {
      	console.debug('onLongPullingNotify', data)
      }
  };

    var isAccessFormalEnv = true; //是否访问正式环境

    var isLogOn = false; //是否开启sdk在控制台打印日志

    //初始化时，其他对象，选填
    var options = {
      'isAccessFormalEnv': isAccessFormalEnv, //是否访问正式环境，默认访问正式，选填
      'isLogOn': isLogOn //是否开启控制台打印日志,默认开启，选填
  }



  var msgflow = document.getElementsByClassName("msgflow")[0];
  var bindScrollHistoryEvent = {
  	init: function () {
  		msgflow.onscroll = function () {
  			if (msgflow.scrollTop == 0) {
  				msgflow.scrollTop = 10;
  				if (selType == webim.SESSION_TYPE.C2C) {
  					getPrePageC2CHistoryMsgs();
  				} else {
  					getPrePageGroupHistoryMsgs();
  				}

  			}
  		}
  	},
  	reset: function () {
  		msgflow.onscroll = null;
  	}
  };
    // webimLogin();
    // $('#select_app_dialog').modal('show');
    $('.submit').click(function(){
    	$(this).hide();
    	$('.add').show();
    })
    $('#login_dialog').modal('show');
    $(function(){
    	$('#login_account').val(uCount);
    	$('#login_pwd').val(userSig);
    	setTimeout(function () {
    		$('#click').click();
    	},500)
    });
    $('.sendmsg').click(function(){
    	var ucccon=$(this).parent().parent().find('#scm_to_account').val();
    	window.location.href='friendss.html?id='+ucccon;
    });
    $(function(){
    	setTimeout(getMyFriend,1000);
    });
    
</script>
